<template>
  <div class="excellent">
    <mu-dialog 
      width="492" 
      :open.sync="excellent"  
      dialog-class="excellent-dialog" 
      :overlay-opacity="0.9"
      overlay-color="#1F2433"
      :overlay-close="false"
    >
      <div class="excellent-dialog-header">
        <div class="title">确认取消优秀</div>
        <img class="fork" src="https://image.xuexiwangzhe.com/Frs7X7n1cwtAvkcc0Tu3A1Ao_FkG" @click="changeExcellent">
      </div>
      <div class="excellent-dialog-tips">
        确认取消这条讨论的「优秀」标记吗？
        <br>
        取消后，这条讨论将不再作为精选的讨论展示。
      </div>
      <div class="excellent-dialog-footer">
        <mu-button
          class="excellent-dialog-cancel"
          color="#ffffff"
          round
          @click="changeExcellent"
        >
          取消
        </mu-button>
        <mu-button
          class="excellent-dialog-next"
          color="#FF7632"
          round
          @click="cancelExcellent"
        >
          确认取消优秀
        </mu-button>
      </div>
    </mu-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      excellent: false,
    }
  },
  methods: {
    changeExcellent() {
      this.excellent = !this.excellent;
    },
    cancelExcellent() {

    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .excellent-dialog {
  border-radius: 18px;

  .mu-dialog-body {
    padding: 30px;
  }

  .excellent-dialog-header {
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;

    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .fork {
      width: 14px;
      height: 14px;
      cursor: pointer;
    }
  }
  .excellent-dialog-tips {
    color: #333333;
  }


  .excellent-dialog-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
  }
  .excellent-dialog-next {
    width: 120px;
    height: 30px;
    font-size: 12px;
    margin-left: 21px;
    box-shadow: none;
  }
  .excellent-dialog-cancel {
    width: 120px;
    height: 30px ;
    font-size: 12px;
    color: #666666;
    border: 1px solid #666666;
    box-shadow: none;
  }
  .hover::before {
    display: none;
  }
}



</style>